<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： list.html
  ~ Date：18-10-15 下午3:33
  ~ Author: guomw
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/head::head('文件列表')">
<body class="gray-bg">
<style>
    .table .ico-file {
        background-image: url("")
    }

    .table .ico-folder {
        background-image: url("")
    }

    .table .ico {
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        height: 30px;
        margin-right: 10px;
        width: 33px;
        z-index: 1;
    }
</style>
<div class="wrapper wrapper-content  animated fadeInRight">
    <!--search-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content p-m no-borders">
                    <div class="form-inline table">
                        <span class="ico ico-folder"></span><span th:text="${folder}"></span>
                    </div>
                    <input type="hidden" th:value="${folder}" id="folder"/>
                    <div class="form-inline">
                        <div class="form-group m-r-sm">
                            <progress id="progress" value="0" max="100" style="display:none"></progress>
                        </div>
                        <div class="form-group m-r-sm">

                            <a href="#" style="position: relative; overflow: hidden;">
                                <button type="button" class="btn btn-success">上传
                                </button>
                                <input id="fileupload" name="file" type="file" multiple="true"
                                       th:data-url="'/user/uploadFile/' + ${folder}"
                                       style="position: absolute; right: 0px; top: -10px; margin: 0px; opacity: 0; padding: 0px; font-family: Arial; font-size: 30px; vertical-align: baseline; cursor: pointer;"/>
                            </a>

                            <!--<button type="submit" class="btn btn-success" data-toggle="modal"-->
                            <!--data-target="#addMenuModal">上传-->
                            <!--</button>-->
                            <button type="button" class="btn btn-success" onclick="jsHelper.deleteA()">删除</button>
                        </div>

                        <div class="form-group m-r-sm">
                            <input type="text" class="form-control input-sm mb10" id="name" name="name"
                                   placeholder="请输入搜索的文件名"/>
                            <button type="button" class="btn btn-success" onclick="jsHelper.search()">搜索</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--search-->
    <!--list-->
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="cbxAll" onclick="jsHelper.checkAll()"></th>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>修改时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="table-content">
                        </tbody>
                    </table>
                    <!--分页控件-->
                    <div th:include="/template/pager::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="../../resource/js/ajaxfileupload.js"-->
<!--th:src="@{/resource/js/ajaxfileupload.js}"></script>-->
<!--<modal>-->
<!--<div class="modal inmodal" id="addMenuModal" tabindex="-1" role="dialog" aria-hidden="true">-->
<!--<div class="modal-dialog">-->
<!--<div class="modal-content animated flipInY">-->
<!--<form name="upload" id="upload" th:action="'/user/uploadReportFile/'+${folder}" method="post"-->
<!--enctype="multipart/form-data">-->
<!--<div class="modal-header" style="font-size: 18px;">-->
<!--<button type="button" class="close" data-dismiss="modal"><span-->
<!--aria-hidden="true">&times;</span><span-->
<!--class="sr-only">Close</span></button>-->
<!--<h4 class="modal-title">上传文件</h4>-->

<!--</div>-->
<!--<div style="margin: 6px;">-->
<!--<div style="margin-left: 10px; ">-->
<!--<a id="uploadpic1" class="btn-lit jUploader-button" href="#"-->
<!--style="cursor: pointer; position: relative; overflow: hidden; direction: ltr;">-->
<!--<button type="button" class="btn btn-primary">添加文件</button>-->
<!--<input type="file" multiple="true"-->
<!--style="position: absolute; right: 0px; top: -10px; margin: 0px; opacity: 0; padding: 0px; font-family: Arial; font-size: 30px; vertical-align: baseline; cursor: pointer;"/>-->
<!--</a>-->

<!--</div>-->
<!--</div>-->
<!--<div class="modal-body">-->

<!--<div class="form-group">-->
<!--<label class="col-sm-3 control-label"></label>-->
<!--<div class="col-sm-8">-->
<!--<label id="fff"></label>-->
<!--<div>-->
<!--<div style="width:50%">-->
<!--<div id='proBar'></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="modal-footer">-->
<!--<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>-->
<!--<button type="button" class="btn btn-primary" onclick="jsHelper.upload()">开始上传</button>-->
<!--</div>-->
<!--</form>-->
<!--<iframe name="uploadf"></iframe>-->
<!--</div>-->

<!--</div>-->
<!--</div>-->
<!--</modal>-->


<template id="template_list">
    <tr>
        <td>{checkbox}</td>
        <td>{name}</td>
        <td>{size}</td>
        <td>{time}</td>
        <td>
            {btnItems}
        </td>
    </tr>
</template>

<footer th:include="/common/footer::js"/>

<script src="/resource/js/jquery.ui.widget.js"></script>
<script src="/resource/js/jquery.fileupload.js"></script>
<script>


    $(function () {
        jsHelper.init();

        var p = $("#progress");
        $('#fileupload').fileupload({
            dataType: 'json',

            progressall: function (e, data) {
                p.show();
                var progress = parseInt(data.loaded / data.total * 100, 10);
                p.val(progress);
                if (progress == 100) {
                    swal("上传成功", "", "success");
                    p.hide();
                    jsHelper.search();
                }
            },

            done: function (e, data) {
                // alert("上传成功");
            }
        });
    });
    var jsHelper = {
        templateList: $("#template_list").html(),
        params: {
            folder: "",
            name: "",
            pageIndex: 1
        },
        init: function () {
            this.params.folder = $("#folder").val();
            var self = this;
            hotUtil.loading.show();
            hotUtil.ajaxCall("/file/list", self.params, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 1) {
                    var data = ret.data;
                    var appendHtml = '';
                    $.each(data.list, function (i, item) {
                        var tempHtml = self.templateList;
                        tempHtml = tempHtml.replace(/{checkbox}/gm, '<input type="checkbox" name="cbxItem" value="' + item.name + '"/>');
                        tempHtml = tempHtml.replace(/{name}/gm, '<span class="ico ico-file"></span>' + item.name);
                        tempHtml = tempHtml.replace(/{size}/gm, item.size + "K");
                        tempHtml = tempHtml.replace(/{time}/gm, item.time);
                        tempHtml = tempHtml.replace(/{time}/gm, item.time);

                        var btnTempHtml = '<a href="#" onclick="jsHelper.delete(\'' + item.name + '\')">删除</a>';
                        tempHtml = tempHtml.replace(/{btnItems}/, btnTempHtml);

                        appendHtml += tempHtml;
                    });
                    $("#table-content").html(appendHtml);

                    var pageinate = new hotUtil.paging(".pagination", self.params.pageIndex, 20, data.pageCount, data.totalCount, 7);
                    pageinate.init(function (p) {
                        goTo(p, function (page) {
                            jsHelper.params.pageIndex = page;
                            jsHelper.init();
                        });
                    });
                }
            });
        },

        search: function () {
            this.params.pageIndex = 1;
            this.params.name = $("#name").val();
            this.init();
        },

        delete: function (name) {
            var p = {folder: $("#folder").val(), name: name};
            hotUtil.ajaxCall("/file/delete", p, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 1) {
                    jsHelper.search();
                }
            });
        },
        deleteA: function () {
            var names = "";
            $("input[name='cbxItem']").each(function () {
                console.log($(this).is(":checked"));
                if ($(this).is(":checked")) names += $(this).val() + ",";
            });
            if (names == "") {
                swal("请选择文件", "", "warning");
                return;
            }

            var p = {folder: $("#folder").val(), names: names};
            hotUtil.ajaxCall("/file/deleteAll", p, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 1) {
                    jsHelper.search();
                }
            });
        },
        upload: function () {
            document.forms['upload'].submit();

        },
        checkAll: function () {
            $("input[name='cbxItem']").each(function () {
                $(this).prop("checked",$("#cbxAll").is(":checked"));
            })
        }
    }


</script>
</body>
</html>
